<template>
  <div id="app">
    <div class="mui-content">
      <tmall-mui-slider :slides="slides"></tmall-mui-slider>
      <fast-nav :buttons="buttons"></fast-nav>
    </div>
  </div>
</template>

<script>

import { ajax, userSettings, userRedirect } from 'assets/js/Lib'

import 'assets/css/mui.css'

import FastNav from 'components/FastNav'
import TmallMuiSlider from 'components/TmallMuiSlider'

export default {
  data() {
    return {
      slides: [],
      buttons: []
    }
  },
  components: {
    FastNav, TmallMuiSlider
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() {
  },
  //在挂载开始之前被调用
  beforeMount() {
  },
  //已成功挂载，相当ready()
  mounted() {
    const vm = this

    mui.init({
      swipeBack: true,
      statusBarBackground: '#f7f7f7'
    })

    ajax({
        url: '/api/index/ads',
        type: 'GET',
        success: (res) => {
          const reverseSlides = res.slide.reverse()
          const reverseIcons = res.fastIcon.reverse()
          localStorage.setItem('$ads-slide', JSON.stringify(reverseSlides))
          localStorage.setItem('$ads-icons', JSON.stringify(reverseIcons))
          vm.slides = reverseSlides
          vm.buttons = reverseIcons
        }
    })
  },
  //相关操作事件
  methods: {
   
  }
}
</script>

<style lang="less">

.mui-slider {
  .slider-img {
    width: 100%;
    min-height: 200px;
    img {
      width: 100%
    }
  }
}
</style>
